<d-data-table
  [dataSource]="basicDataSource"
  (cellClick)="cellClick($event)"
  (cellDBClick)="cellDBClick($event)"
  (rowDBClick)="rowDBClick($event)"
  (rowClick)="rowClick($event)"
  [scrollable]="true"
  [tableOverflowType]="'overlay'"
>
  <d-column [order]="1" field="$index" header="#" [width]="'50px'"></d-column>
  <d-column
    [order]="3"
    field="firstName"
    header="First Name"
    [sortable]="true"
    [width]="'150px'"
    [advancedHeader]="[
      { header: 'Name', rowspan: 1, colspan: 2, $width: '300px' },
      { header: 'First Name', rowspan: 1, colspan: 1 }
    ]"
  >
  </d-column>
  <d-column
    [order]="5"
    field="lastName"
    header="Last Name"
    [sortable]="true"
    [width]="'150px'"
    [advancedHeader]="[
      { header: 'Name', rowspan: 1, colspan: 0 },
      { header: 'Last Name', rowspan: 1, colspan: 1 }
    ]"
  ></d-column>
  <d-column [order]="7" field="gender" header="Gender" [sortable]="true" [width]="'150px'"></d-column>
  <d-column
    [order]="2"
    field="dob"
    header="Date of birth"
    [fieldType]="'date'"
    [extraOptions]="{ dateFormat: 'yyyy/MM/dd' }"
    [width]="'200px'"
  ></d-column>
</d-data-table>
